<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>helloVue</title>
  <script src="../../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
  {{message}}<br>
  单向数据绑定：<input type="text" v-bind:value="name1"><br>
  双向数据绑定：<input type="text" v-model:value="name2"><br>
  简写<br>
  单向数据绑定：<input type="text" :value="name1"><br>
  双向数据绑定：<input type="text" v-model="name2"><br>
</div>
<script type="text/javascript">
  /*
  * 1、JS表达式和JS代码的区别
  *   表达式：一个表达式是会生会生成一个值的，可以放在任何一个需要值的地方
  *   代码：语句，循环也是语句，但是循环并不会返回值
  * 2、一个容器对应一个vue实例
  * 3、data中的数据改变，那么页面数据会立即随之更新
  * */
  Vue.config.productionTip = false;//组织vue在启动时生成生产提示
  const vm = new Vue({
    //用于指定当前VUE实例为那个容器服务，值通常为css选择器，或者document.getElementById('')但是一般不用麻烦
    el:'#root',
    //对象的方式，数据供el绑定的容器去使用
    // data:{
    //   message:'Hello VUE!'
    // }
    //函数方式
    // data:()=>{
    //   return{message:'哈哈'}
    // }
    data(){
      return {
        message:'hello vue.',
        name1:'chinese',
        name2:'中文'
      }
    }
  });
</script>

</body>
</html>